<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<!-- 搜索框 -->
			<view class="m-2 p-3 rounded-20 ments">
				<view class="ments_title py-2 rounded-10">
					<input class="ml-3 text-white"  type="text" placeholder="请输入运单编号" placeholder-class="font-weight text-white" @input="waybill_input"  />
				</view>
			</view>
			<!-- 地址 -->
			<view class="m-2 bg-white p-3 rounded-20">
				<view class="bg-white d-flex j-sb" @click="address(order_shipments)">
					<view class="">
						<view class="d-flex">
							<u-icon name="map" color="#" size="35"></u-icon>
							<view class="ml-2 font-md font-weight" v-if="order_shipments">{{order_shipments.consignee}}&nbsp;&nbsp;&nbsp;{{order_shipments.mobile}}</view>
						</view>
						<view class="text-muted pt-1" v-if="order_shipments">收货地址：{{order_shipments.province+order_shipments.city+order_shipments.district}}&nbsp;{{order_shipments.address}}</view>
					</view>
					<u-icon name="arrow-right" color="#888888" size="35"></u-icon>
				</view>
			</view>
			<!-- 展示订单 -->
			<view class="m-2 pl-3 bg-white rounded-20">
				<view class="border-bottom py-2">
					<u-checkbox-group >
						<u-checkbox v-model="flag" shape="circle" size="40" @change="checkbox_all" active-color="#F24F4A">
							<text class="font-weight" >全选</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<u-checkbox-group>
					<view class="d-flex a-center" v-for="(item,index) in order_goods" :key="index">
						<u-checkbox  active-color="#F24F4A" shape="circle" v-model="item.order_show" size="40" @change="order_goods_checkbox(item,index,item.order_show)">
							<view class="py-2 d-flex border-bottom">
								<image class="shi_hot" :src="item.img.url" mode=""></image>
								<view class="ml-2 flex-1">
									<view class="font-31 font-weight ellipsis">{{item.goods_name}}</view>
									<view class="text-muted white-space ellipsis-1">货号:&nbsp;{{order_shipments.order_sn}}</view>
									<view class="text-muted d-flex mt-3">
										<view class="mr-2">库存:&nbsp;{{item.goods_number}}</view>
										<view class="">数量:&nbsp;{{item.goods_number}}</view>
									</view>
								</view>
							</view>
						</u-checkbox>
					</view>
				</u-checkbox-group>	
			</view>
			<view class="footer"></view>
			<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
				<button type="warn" @click="confrim_shipments">确定</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:false,
				order_shipments:"", // 发货列表
				order_id:"", // 订单ID
				goods_id:[], // 货品ID
				waybill:"", // 运单编号
				order_goods:[], // 货品列表
				show:false,
				new_order_goods:[],
				send_number:{},
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			showToast(e) {
				this.$refs.uToast.show({
					title: e,
					type: 'default',
				})
			},
			// 发货单
			waybill_input(e){
				this.waybill=e.detail.value
			},
			// 修改地址
			address(item){
				uni.navigateTo({
					url:"/pagesA/order/order-modifyaddress?order_id="+item.order_id
				})
			},
			// 货品复选框
			order_goods_checkbox(item,index,e){
				    var num=1;
				    this.order_goods.forEach((v,i)=>{
				      	if(!e&&v.order_show){
				      		return num++
				      	}
				    })
					if(!e){
						this.new_order_goods.push(item)
						this.send_number=this.new_order_goods.map(v=>{
							return {
								[v.rec_id]:v.goods_number
							}
						})
					}else{
						this.new_order_goods.splice(index,1)
					}
				
				    if(this.order_goods.length==num){
						if(this.order_goods.length==1){
							return this.flag=!this.flag
						}else{
							return this.flag=true
						}
				    }else{
				     	return this.flag=false 
				    }
			},
			// 全选
			checkbox_all(){
				this.order_goods.forEach((item,index)=>{
					if(!this.flag){
						this.send_number=this.order_goods.map(v=>{
							return {
								[v.rec_id]:v.goods_number
							}
						})
						return item.order_show=true
					}else{
						this.send_number=""
						return item.order_show=false
					}
				})
			},
			// 确认发货
			confrim_shipments(){
				var obj={}
				if(this.send_number){
					this.send_number.map(v=>{
						Object.assign(obj,v)
					})
				}
				if(this.waybill==""){
					let mes="请输入运单编号"
					this.showToast(mes)
				}else if(this.send_number=={}){
					let mes="请选择货品"
					this.showToast(mes)
				}else{
					this.$H.post("admin/order/operate/delivery",{
						order_id:this.order_shipments.order_id,
						invoice_no:this.waybill,
						send_number:obj,
						action_note:"",
						}).then(res=>{
							uni.navigateBack({
								delta:1
							})	
					})
				}
			}
		},
		onLoad(e) {
			this.order_id=e.order_id
			this.$H.post("admin/order/operate/shipping/detail",{order_id:e.order_id}).then(res=>{
				this.u_loadmore=false 
				this.order_shipments = res.data;
				this.order_goods = res.data.order_goods.map(v=>{
					return {
						...v,
						order_show:false,
					}
				});
			})
		},
		onShow() {
			this.$H.post("admin/order/operate/shipping/detail",{order_id:this.order_id}).then(res=>{
				this.order_shipments=res.data
			})
		},
	}
</script>

<style>
	.ments{
		background-image: linear-gradient(to right,#ef2b4d,#f66343);
	}
	.ments_title{
		background-image: linear-gradient(to right,#f25771,#f78069);
	}
	.shi_hot{
		width: 215upx;
		height: 215upx;
	}
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.footer{
		height: 130upx;
		width: 100%;
	}
</style>
